input {
  outline: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input::-webkit-input-placeholder {
  color: #adadad;
}

input::-moz-input-placeholder {
  color: #adadad;
}

input::-ms-input-placeholder {
  color: #adadad;
}

body {
  height: 100vh;
}

.login {
  width: 100%;
  height: 100%;
  min-width: 1366px;
  min-height: 768px;
  background: url(../images/login/bg.jpg) no-repeat center;
  background-size: 100% 100%;
  font-size: 14px;
  line-height: 1.4
}

.login .con {
  width: 57.25%;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 80px;
  padding-bottom: 40px;
}

.login .con .logo-box {
  width: 87.21%;
  margin: 0 auto;
}

.login .article {
  width: 100%;
  margin-top: 94px;
}

.article .left {
  width: 50.64%;
}

.article .right {
  width: 42.07%;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.article .right .title {
  text-align: center;
  padding: 10px 0;
  background-image: linear-gradient(0deg,
      #346db5 0%,
      #4597cf 50%,
      #55c0e8 100%);
  color: #fff;
  box-shadow: 0px -1px 0px 0px #7c1906;
}

.article .right .ul {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 4%;
  background-color: #F0F0F0;
}

.article .right .li {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.article .right .li::before {
  position: absolute;
  content: "";
  left: 10px;
}

.article .right .user::before {
  width: 13px;
  height: 14px;
  background: url(../images/login/user.png) no-repeat center;
  background-size: 100% 100%;
  top: 50%;
  transform: translateY(-50%);
}

.article .right .password::before {
  width: 10px;
  height: 12px;
  background: url(../images/login/password.png) no-repeat center;
  background-size: 100% 100%;
  top: 50%;
  transform: translateY(-50%);
}

.article .right .code-icon::before {
  width: 10px;
  height: 12px;
  background: url(../images/login/code.png) no-repeat center;
  background-size: 100% 100%;
  top: 50%;
  transform: translateY(-50%);
}

.article .right .input {
  width: 100%;
  height: 100%;
  padding: 12px 36px;
  text-align: center;
}

.article .right .code-box {
  width: 60.6%;
}

.article .right .code {
  width: 35.76%;
  padding: 12px 0;
  text-align: center;
  border: solid 1px #51c3e1;
  background-color: #ebfdff;
  color: #3986af;
}

.article .right .btn {
  display: inline-block;
  padding: 12px 40px;
  background-image: linear-gradient(0deg,
      #346db5 0%,
      #4597cf 50%,
      #55c0e8 100%),
    linear-gradient(#44a1c5,
      #44a1c5);
  color: #ffffff;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.article .right .li:nth-last-of-type(1) {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 0;
}

.footer {
  margin-top: 140px;
  text-align: center;
  line-height: 1.8;
}

.footer .text-box {
  display: inline-block;
  text-align: left;
}